import React, { Component } from 'react'
import './index.less'
import { Card,Tabs, message,Icon} from 'antd'
const {TabPane} =Tabs
export default class Tab extends Component {
    newTabIndex =0;
    state={}
    handleCallback=(key)=>{
        message.info('Hi,你选择了页签:' + key)
     
    }
    componentWillMount(){
        const panes = [
            {
                title:'Tab1',
                content:"Tab1 React",
                key:"1",
                closable: false,
            },
            {
                title: 'Tab2',
                content: "Tab2 all",
                key: "2"
            },
            {
                title: 'Tab3',
                content: "Tab3 Vue",
                key: "3"
            },
        ]
        this.setState({
            activeKey: panes[0].key,
            panes
        })
    }
    onChange=(activeKey)=>{
        this.setState({
            activeKey
        })
    }
    onEdit = (targetKey, action) => {
        this[action](targetKey);
    };

    add = () => {
        const { panes } = this.state;
        const activeKey = `newTab${this.newTabIndex++}`;
        panes.push({ title: activeKey, content: 'Content of new Tab', key: activeKey });
        this.setState({ panes, activeKey });
    };

    remove = targetKey => {
        let { activeKey } = this.state;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (panes.length && activeKey === targetKey) {
            if (lastIndex >= 0) {
                activeKey = panes[lastIndex].key;
            } else {
                activeKey = panes[0].key;
            }
        }
        this.setState({ panes, activeKey });
    };
    render(){
        return (   
            <div>
                <Card title="Tab页签" className="card-wrap">   
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab='tab1' key="1">React</TabPane>
                        <TabPane tab='tab2' disabled key="2">vue</TabPane>
                        <TabPane tab='tab3' key="3">all</TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab带图页签" className="card-wrap">
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab={<span><Icon type="plus" />Tab 1</span>} key="1">React</TabPane>
                        <TabPane tab={<span><Icon type="edit" />Tab 1</span>} disabled key="2">vue</TabPane>
                        <TabPane tab={<span><Icon type="delete" />Tab 1</span>} key="3">all</TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab带图页签" className="card-wrap">
                    <Tabs 
                        defaultActiveKey="1" 
                        onChange={this.onChange}
                        activeKey={this.state.activeKey}
                        type="editable-card"
                        onEdit={this.onEdit}
                    >
                        {this.state.panes.map((item)=>
                           <TabPane tab={item.title} key={item.key} closable={item.closable}>{item.content}</TabPane>
                        )}
                    </Tabs>
                </Card>
            </div>
        )
    }
}